<template>
    <div>
        <h1>科室管理页面</h1>
        <el-input v-model="keywords" placeholder="请输入科室编号或科室名称" style="width: 200px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
        <!--       弹出对话框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="科室编号" :label-width="formLabelWidth">
                    <el-input v-model="form.DeptCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.DeptName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请选择科室分类" :label-width="formLabelWidth">
                    <el-select v-model="form.DeptCategoryID" placeholder="请选择科室分类">
                        <el-option label="内科" value="1"></el-option>
                        <el-option label="外科" value="1"></el-option>
                        <el-option label="神经科" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择科室类型" :label-width="formLabelWidth">
                    <el-select v-model="form.DeptType" placeholder="请选择科室类型">
                        <el-option label="临床" value="1"></el-option>
                        <el-option label="医技" value="2"></el-option>
                        <el-option label="财务" value="3"></el-option>
                        <el-option label="行政" value="4"></el-option>
                        <el-option label="其他" value="5"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addDepartment">保 存</el-button>
            </div>
        </el-dialog>

        <!--将查询结果放入表格中-->
        <div>
        <el-table :data="tableData" style="text-align: center;left: 20%" height="500px" align="center" >
            <el-table-column prop="id" label="科室ID" width="150">
            </el-table-column>
            <el-table-column prop="deptCode" label="科室编号" width="150" align="center">
            </el-table-column>
            <el-table-column prop="deptName" label="科室名称" width="120" align="center">
            </el-table-column>
            <el-table-column prop="deptType" label="科室分类" width="120" align="center">
            </el-table-column>
            <el-table-column prop="deptCategoryID" label="科室类型" width="120" align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" >编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100" align="center">
                <template slot-scope="scope">
                    <el-button type="danger"  @click="hanledelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--            编辑科室框-->
            <el-dialog title="编辑科室" :visible.sync="updateFormVisible">
                <el-form :model="updateform">
                    <el-form-item label="科室编号" :label-width="formLabelWidth">
                        <el-input v-model="updateform.DeptCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="科室名称" :label-width="formLabelWidth">
                        <el-input v-model="updateform.DeptName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="请选择科室分类" :label-width="formLabelWidth">
                        <el-select v-model="updateform.DeptCategoryID" placeholder="请选择科室分类">
                            <el-option label="内科" value="1"></el-option>
                            <el-option label="外科" value="1"></el-option>
                            <el-option label="神经科" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请选择科室类型" :label-width="formLabelWidth">
                        <el-select v-model="updateform.DeptType" placeholder="请选择科室类型">
                            <el-option label="临床" value="1"></el-option>
                            <el-option label="医技" value="2"></el-option>
                            <el-option label="财务" value="3"></el-option>
                            <el-option label="行政" value="4"></el-option>
                            <el-option label="其他" value="5"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateDepartment">保 存</el-button>
                </div>
            </el-dialog>
    </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
    </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Department",
        data(){
            return{
                keywords:"",
                tableData: [],
                currentPage: 1,
                pageSize:5,
                totalPage:0,
                dialogFormVisible: false,
                updateFormVisible:false,
                form: {
                    DeptCode:'',
                    DeptName:'',
                    DeptCategoryID:'',
                    DeptType:''
                },
                updateform:{
                    DeptCode:'',
                    DeptName:'',
                    DeptCategoryID:'',
                    DeptType:'',
                    ID:''
                },
                formLabelWidth: '120px'
            }
        },
        methods:{
            hanledelete(id) {
                this.$confirm('此操作将永久删除条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get("http://localhost:8888/his1/department/delete.do",{params:{ID:id}})
                    .then((response)=>{
                        if(response.status == 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.search();
                        }else(
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            })
                        )
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateDepartment(){
                this.axios.get("http://localhost:8888/his1/department/update.do",{params:this.updateform})
                .then((response)=>{
                    if(response.status == 200){
                        this.updateFormVisible = false;
                        this.updateSuccess();
                        this.search();
                    }

                })

            },
            updateSuccess() {
                this.$message({
                    type: 'success',
                    message: '已成功保存信息'
                });
            },
            handleClick(row) {
                this.updateform.DeptCategoryID = row.deptCategoryID;
                this.updateform.DeptCode = row.deptCode;
                this.updateform.DeptName = row.deptName;
                this.updateform.DeptType = row.deptType;
                this.updateform.ID = row.id;
                this.updateFormVisible = true
            },

            //定义搜索科室
            search:function () {
                //访问服务器接口获取数据
                //本地服务器地址--http://localhost:8888/his1/search.do
                //使用axios库的get/post方法
                this.axios.get("http://localhost:8888/his1/department/search.do",{
                    params:{
                        'keywords':this.keywords,
                        'pagenum':this.currentPage,
                        'pagesize':this.pageSize
                    }
                })
                .then((response)=>{
                    //控制台先打印数据
                    this.tableData = response.data.data.list;
                    this.totalPage = response.data.data.total;
                })
            },
            handleSizeChange:function(val) {
                this.pageSize = val;
                this.search();
            },
            handleCurrentChange:function(val) {
                this.currentPage = val;
                this.search();
            },
            addDepartment:function(){
                this.axios.get('http://localhost:8888/his1/department/add.do',{params:this.form})
                .then((response)=>{
                    this.dialogFormVisible = false;
                    if(response.status == 200){
                        this.$message({
                            type: 'success',
                            message: '已成功添加信息'
                        })
                    }

                })
            }
        }
    }

</script>

<style scoped>

</style>